import { FlexAlign } from '../layout/flex-box-store'

export const defaultInputProps = {
  align: FlexAlign.start,
  border: undefined
}
export function Input(props: {
  value?: string
  placeholder?: string
  placeholderColor?: string
  align?: FlexAlign
  border?: string
  fontSize?: number
}) {
  const p = { ...defaultInputProps, ...props }
  const style: { [x: string]: string | number | undefined } = {
    border: p.border,
    fontSize: props.fontSize,
    textAlign:
      p.align === FlexAlign.center ? 'center' : p.align === FlexAlign.start ? 'left' : 'right'
  }

  if (p.placeholderColor) {
    style['--placeholder-color'] = p.placeholderColor
  }

  return <input value={props.value} placeholder={props.placeholder} style={style}></input>
}
